<template>
	<view class="dropdown-group-style">
		<view class="detailed_mid ">
			<dropdown :class="{'choose-box':true,'no-right': !isSearch}" active-color="#f1255d" v-if="isshow == false" menu-icon="arrow-down-fill"
			 menu-icon-size="16rpx" :layout="layout">
				<dropdown-item v-model="condition.value1" :height="height" :options="list.city" :title="chooseData.city"
				 @change="(value)=>changeType(value, 'city')"></dropdown-item>
				<dropdown-item v-model="condition.value2" :height="height" :options="list.brand" :title="chooseData.brand"
				 @change="(value)=>changeType(value, 'brand')"></dropdown-item>
				<dropdown-item v-model="condition.value3" :height="height" :options="list.distance" :title="chooseData.distance"
				 @change="(value)=>changeType(value, 'distance')"></dropdown-item>
				<!-- <u-dropdown-item v-model="value2" disabled="true" menu-icon="arrow-down"></u-dropdown-item> -->
			</dropdown>
			<u-icon class="icon-box" :custom-style="{'margin-right':'30rpx'}" name="search" color="#666666" size="48" @click="isshow = true" v-if="isshow == false && isSearch"></u-icon>
			<u-search placeholder="搜索影院" v-model="condition.keyword" v-if="isshow == true && isSearch" margin="12rpx 20rpx" action-text="取消"
			 @change="searchCinema" @custom="searchCancel"></u-search>
		</view>
	</view>
</template>

<script>
	import dropdown from '@/pages/components/dropdown/u-dropdown.vue'
	import dropdownItem from '@/pages/components/dropdown/u-dropdown-item.vue'
	export default {
		data() {
			return {
				condition: {
					value1: '',
					value2: '',
					value3: '',
					keyword: '',
				},
				//选择内容
				chooseData: {
					city: '全城',
					brand: '品牌',
					distance: '离我最近',
				},
				isshow: false,
			}
		},
		components: {
			dropdown,
			dropdownItem,
		},
		props: {
			list: {
				type: Object,
				default: {}
			},
			isSearch: {
				type: Boolean,
				default: false
			},
			height: {
				type: Number,
				default: 800
			},
			// 布局 两个值：<>样式为左边两个右边一个；<样式为3个全部靠左
			layout: {
				type: String,
				default: '<>'
			}
		},
		methods: {
			//改变筛选条件
			changeType(data, type) {
				// console.log(data,type,'重新搜索');
				let index = this.list[type].findIndex(item => item.value == data)
				this.chooseData[type] = this.list[type][index].label
				let result = {
					value1: this.condition.value1,
					value2: this.condition.value2,
					value3: this.condition.value3,
				}
				this.$emit('change', result)
			},
			//搜索内容改变
			searchCinema() {
				this.$emit('searchChange', this.condition.keyword)
			},
			// 取消搜索
			searchCancel() {
				this.condition.keyword = ""
				this.$emit('searchChange', this.condition.keyword)
				this.isshow = false
			},
			
			//重置内容
			resetContent() {
				// console.log(111);
				this.condition = {
						value1: '0',
						value2: '',
						value3: 'distance',
						keyword: '',
					},
				this.chooseData = {
					city: '全城',
					brand: '品牌',
					distance: '离我最近',
				}
			}
		},
		computed: {
			isChangeCondition(){
				return this.$store.state.isChangeCondition
			}
		},
		watch:{
			// 在city页重新选择城市，重置选择的条件和信息
			// '$store.state.isChangeCondition'(n, o) {
			// 	console.log(n,'vuex中的isChangeCondition发生改变');
			// 	if (n == true) {
			// 		this.resetContent()
			// 		// console.log(this.condition,'000')
			// 		console.log(this.$store.state.isChangeCondition,'改变前');
			// 		this.$store.commit('setChooseCondition', false)
			// 		console.log(this.$store.state.isChangeCondition,'改变后');
			// 	}
			// },
			isChangeCondition: {
				deep:true,
				handler(n){
					// console.log(n,'计算属性监听')
					if (n == true) {
						this.resetContent()
						// console.log(this.condition,'000')
						// console.log(this.$store.state.isChangeCondition,'前')
						this.$store.commit('setChooseCondition', false)
						// console.log(this.$store.state.isChangeCondition,'后')
						// 此时时没有触发重新搜索的（品牌和离我最近都没变），手动搜索一次
						this.$emit('change', this.condition)
						// 下拉菜单未收回时收回
						this.$nextTick(()=>{
							this.$children[0].close()
						})
					}
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.dropdown-group-style {
		.detailed_mid {
			position: relative;
			width: 100%;
			height: 90rpx;
			// border-top: 1rpx solid #E5E5E5;
			// border-bottom: 1rpx solid #E5E5E5;
		
			.detailed_search {
				box-sizing: border-box;
				margin-top: 20rpx;
			}
		}
	}
</style>
